;.<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>用户管理</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<%--    <link rel="stylesheet" type="text/css" href="/static/css/style1.css" />--%>
<%--    <link rel="icon" href="${pageContext.request.contextPath}/static/img/favicon.ico"  type="image/x-icon" />--%>
<%--    <link href="/static/js/laypage/skin/laypage.css" />--%>
<%--    <link href="${pageContext.request.contextPath}/static/js/laypage/skin/laypage.css" rel="stylesheet"/>--%>
<%--    　<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>--%>
<%--    <script src="${pageContext.request.contextPath}/static/js/laypage.js"></script>--%>
<%--    <script type="text/javascript" src="/static/js/laypage.js"></script>--%>
<%--    <link rel="stylesheet" type="text/css"--%>
<%--          href="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/css/bootstrap.min.css" />--%>
<%--    <script src="/static/js/jquery.min.js"></script>--%>
<%--    <script src="/static/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>--%>
<%--    <script src="/static/js/bootbox.min.js"></script>--%>
    <style>
        .page {
            font-family: Arial, "楷体";
            font-size: 15px;
            line-height: 26px;
            color: #000000;
            height: 40px;
            margin-top: -15px;
            background-color: #EEF6FF;
            margin-right: 0;
        }


        .page td {
            padding-right: 10px;
            padding-left: 10px;
        }

        .page select {
            font-family: Arial, "楷体";
            font-size: 12px;
            color: #000000;
            line-height: 18px;
            border: 1.5px solid #5084BB;
        }
    </style>
</head>
<body>
<jsp:include page="page.jsp"></jsp:include>
<div class="box">
    <!-- 		<div class="title">后台管理用户信息表</div> -->
    <div class="content">
        <!--搜索输入框及查询、重置按钮-->
        <form action="/hello/search" method="post">
        <div class="container content_width">
            <div class="person_search">
                <div class="search_input">
                    <div class="input-group mb-3">
                        <span>根据角色名查询：</span> <input id="username" type="text" name="username"
                                                 class="form-control" placeholder="请输入用户名" value="">
                    </div>
                </div>
                <div class="search_input">
                    <div class="input-group mb-3" >
                        <span>角色：</span>
                        <select name="roleone" id="rolename" class="roleselect">
                            <option value="">请选择</option>
                             <c:forEach items="${roles}" var="r">
<%--                                 <c:if test="${r.rolename eq searchuser.roleid.rolename}">--%>
<%--                                     selected="selected"</c:if>--%>
                                 <option value="${r.rolename}"  >${r.rolename}</option>
                       </c:forEach>
                        </select>

                    </div>
                </div>
                <div class="search_input">

                    <button class="btn btn-primary search_btn" type="submit"
                            id="search_btn" >查询</button>

                    <button class="btn btn-primary search_btn" type="button"
                            id="back_btn">重置</button>
                </div>
            </div>
            <div class="line"></div>
        </div>
        </form>
        <!--添加按钮及bootstrap的模态框-->
        <div class="export">
            <button id="new_add" type="button" class="btn btn-primary btn-sm"
                    data-toggle="modal" data-target="#renyuan">
                <img src="/static/image/add_two.png" /> <span>添加</span>
            </button>
            <div class="modal fade" id="renyuan">
                <div class="modal-dialog modal-lg modal_position">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">添加</h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        <form id="form1" name="form1" action="/hello/saveuser" >
                            <div class="modal-body">
                                <table id="xztb" class="table" >
                                    <!--新修改弹窗的样式-->
                                    <tbody>
                                    <tr>
                                        <td class="tb_bg"><label ><font
                                                style="font-size: 14px; color: red;">*</font>用户名${pages}</label></td>
                                        <td><input class="userName" type="text"
                                                   name="username"  placeholder="请输入用户名" value=""/></td>
                                        <td class="tb_bg"><label ><font
                                                style="font-size: 14px; color: red;">*</font>角色名${pagecurrent}</label></td>
                                        <td> <select name="roleone" >
                                            <option value="">请选择</option>
                                            <c:forEach items="${roles}" var="r">
                                                <option value="${r.rolename}" >${r.rolename}</option>
<%--                                                <c:if test="${r.rolename eq searchuser.roleid.rolename}">--%>
<%--                                                    selected="selected"</c:if>--%>
                                            </c:forEach>
                                        </select></td>

                                    </tr>
                                    <tr>
                                        <td class="tb_bg"><label ><font
                                                style="font-size: 14px; color: red;">*</font>邮箱</label></td>
                                        <td><input type="text" name="email" placeholder="请输入邮箱" value=""/></td>
                                        <td class="tb_bg"><label ><font
                                                style="font-size: 14px; color: red;">*</font>性别</label></td>
                                        <td>
                                            <select name="gender" >
                                                <option  value="">请选择</option>
                                                <option value="1" <c:if test="${u.gender eq '男'}">selected="selected"</c:if>   >男</option>
                                                <option value="2" <c:if test="${u.gender eq '女'}">selected="selected"</c:if>>女</option>
                                            </select>

                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="tb_bg"><label ><font
                                                style="font-size: 14px; color: red;">*</font>电话</label></td>
                                        <td><input type="text" name="phone" placeholder="请输入电话" value=""/></td>
                                        <td class="tb_bg"><label ><font
                                                style="font-size: 14px; color: red;">*</font>账户</label></td>
                                        <td><input type="text" name="money" placeholder="账户余额" value=""/></td>
                                    </tr>
                                    <tr>
                                        <td class="tb_bg"><label ><font
                                                style="font-size: 14px; color: red;">*</font>用户id</label></td>
                                        <td><input class="jobNum" type="text"
                                                   name="idcard"  placeholder="请输入id" value=""/></td>
                                    </tr>
                                    </tbody>
                                </table>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary"
                                            data-dismiss="modal">取消</button>
                                    <button id="adbtn" type="submit" class="btn btn-secondary" >确定</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!--表格列表-->
        <table id="tb" class="table">
            <thead>
            <tr>
                <th>角色名</th>
                <th>用户名</th>
                <th>性别</th>
                <th>手机</th>
                <th>邮箱</th>
                <th>账号</th>
                <th>用户ID</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="show_tbody">
            <c:forEach items="${users}" var="u">
                <tr>
                    <td>${u.roleid.rolename }</td>
                    <td>${u.username}</td>
                    <td>${u.gender }</td>
                    <td>${u.phone }</td>
                    <td>${u.email }</td>
                    <td>${u.money }</td>
                    <td>${u.idcard }</td>
                    <td><div class="edit2">

                        <span id ="edit1" class="edit1" data-toggle="modal" data-target="#renyuan1" style="color:#479eff;cursor: pointer;" onclick="doUserModify(${u.userid})">编辑</span>
                        <div class="modal fade" id="renyuan1">
                            <div class="modal-dialog modal-lg modal_position">
                                <div class="modal-content" id="modals">
                                    <div class="modal-header">
                                        <h4 class="modal-title">编辑</h4>
                                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                                    </div>
                                    <form id="form2" name="form2" action="/hello/UserModify" method="post">
                                        <div class="modal-body">
                                            <input type="text" name="userid" id="uuid" value="${u.userid}" hidden/>
                                            <table id="xztb" class="table" >
                                                <tbody>
                                                <tr>
                                                    <td class="tb_bg"><label ><font
                                                            style="font-size: 14px; color: red;">*</font>用户名</label></td>
                                                    <td><input class="userName" type="text"
                                                               name="username" id="uname" /></td>
                                                    <td class="tb_bg"><label ><font
                                                            style="font-size: 14px; color: red;">*</font>角色名</label></td>
                                                    <td><<select name="roleone" id="urole">
                                                        <option value="">请选择</option>
                                                        <c:forEach items="${roles}" var="r">
<%--                                                            <c:if test="${r.rolename eq u.roleid.rolename}">--%>
<%--                                                                selected="selected"</c:if>--%>
                                                            <option value="${r.rolename}" >${r.rolename}</option>
                                                        </c:forEach>
                                                    </select></td>

                                                </tr>
                                                <tr>
                                                    <td class="tb_bg"><label ><font
                                                            style="font-size: 14px; color: red;">*</font>性别</label></td>
                                                    <td>

                                                        <select name="gender" id="ugender">
                                                            <option >请选择</option>
                                                            <option value="男"  >男</option>
                                                            <option value="女" >女</option>
<%--                                                            <c:if test="${u.gender eq '女'}">selected="selected"</c:if>--%>
                                                        </select>

                                                    </td>
                                                    <td class="tb_bg"><label ><font
                                                            style="font-size: 14px; color: red;">*</font>电话</label></td>
                                                    <td><input type="text" name="phone" id="uphone" /></td>
                                                </tr>
                                                <tr>
                                                    <td class="tb_bg"><label ><font
                                                            style="font-size: 14px; color: red;">*</font>账户</label></td>
                                                    <td><input type="text" name="money" id="umoney"/></td>
                                                    <td class="tb_bg"><label ><font
                                                            style="font-size: 14px; color: red;">*</font>邮箱</label></td>
                                                    <td><input type="text" name="email" id="uemail" /></td>
                                                </tr>
                                                <tr>
                                                    <td class="tb_bg"><label ><font
                                                            style="font-size: 14px; color: red;">*</font>注册日期</label></td>
                                                    <td><input class="jobNum" type="text"
                                                               name="pdate" id="update" /></td>
                                                </tr>
                                                </tbody>
                                            </table>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary"
                                                        data-dismiss="modal" style="background: white">取消</button>
                                                <button id="ad_btn" type="button" class="btn btn-secondary"  data-toggle="modal" data-target="#renyuan1">确定</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div><a href="#"><span onclick="deleteit(${u.userid})">删除</span></a>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>

        <table width="100%" border="0" align="center" cellpadding="0"
               cellspacing="0" class="page">
            <tr>
                <td width="50%" align="left">共有&nbsp;${counttotal }&nbsp;条记录，<span
                        style="font-family: 楷体; font-size: 15px; color: black">第</span><span
                        style="font-family: 楷体; font-size: 15px; color: black">
						${pagecurrent }/${pages } </span><span
                        style="font-family: 楷体; font-size: 15px; color: black;">页</span></td>
                <td width="50%" align="right"><a href="/hello/roles/1">首页</a>
                    <a href="/hello/roles/${pagecurrent-1<=1?1:pagecurrent-1}">上一页</a>
                    <a
                            href="/hello/roles/${pagecurrent+1>=pages?pages:pagecurrent+1}">下一页</a>
                    <a href="/hello/roles/${pages}">末页&nbsp;</a>&nbsp;跳转到 <select
                            name="select2" onchange="changePage(this)">
                        <c:forEach begin="1" end="${pages }" step="1" var="i">
                            <option value="${i}" ${i==pagecurrent?"selected":"" }>${i
                                    }</option>
                        </c:forEach>
                    </select></td>
            </tr>
        </table>
        <script>
            //定义全局变量记录页码信息

            <%--var globalDate = {};--%>
            <%--//1页显示两条数据--%>
            <%--globalDate.pageSize=${pagesize};--%>

            <%--$(function () {--%>
            <%--    // globalDate.pageNum=1;--%>
            <%--    //查询数据--%>
            <%--    layer.alert('内容', {--%>
            <%--        icon: 1,--%>
            <%--        skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅--%>
            <%--    })--%>

            <%--    search();--%>

            <%--});--%>

            <%--//查询数据--%>
            <%--function search() {--%>
            <%--    var str = "";--%>


            <%--                var page = ${pages};  //总页数--%>
            <%--                var curr =${pagecurrent};    //当前页--%>
            <%--                var size= ${pagesize};--%>

            <%--                laypage({--%>
            <%--                    cont: 'doctorDiv',  //分页需要显示的地方--%>
            <%--                    pages: page,    //总页数--%>
            <%--                    curr: curr,     //当前页--%>
            <%--                    groups: size,//连续显示分页数--%>
            <%--                    skip: true,     //是否开启跳页--%>
            <%--                    first: '首页',--%>
            <%--                    last: '尾页',--%>
            <%--                    skin: 'molv',   //加载内置皮肤，也可以直接赋值16进制颜色值，如:#c00--%>
            <%--                    prev: '<', //若不显示，设置false即可--%>
            <%--                    next: '>', //若不显示，设置false即可--%>
            <%--                    jump: function (e, first) { //触发分页后的回调--%>
            <%--                        if (!first) { //一定要加此判断，否则初始时会无限刷新--%>
            <%--                            // globalDate.pageNum = e.curr;--%>
            <%--                            // search(globalDate);--%>

            <%--                            window.location="/hello/roles/"+e.curr;--%>
            <%--                        }--%>
            <%--                    }--%>
            <%--                });--%>
            <%--    };--%>
            function changePage(th) {
                window.location="/hello/roles/"+th.value;
            }

            function deleteit(userid) {

                window.location="/hello/delete/"+userid;  }


            $("#ad_btn").click(function(){

               var username= $("#uname").val();
               var rolename=  $("#urole").val();
               var email=  $("#uemail").val();
               var phone=  $("#uphone").val();
               var money=  $("#umoney").val();
               var gender= $("#ugender").val();
               var userid=$("#uuid").val();
               var date={"userid":userid,"username":username,"roleone":rolename,"email":email,"phone":phone,"money":money,"gender":gender};
                $.ajax({
                    url:"/hello/UserModify",
                    type : "post",
                    dataType : "json",
                    data: JSON.stringify(date),
                    contentType: "application/json",
                    success:function (data) {
                        window.location="/hello/roles/1";

                    }
                })
            })


            function doUserModify(userid) {
                layer.msg('请修改');
                $.ajax({
                    url:"/hello/showmodify/"+userid,
                    type : "get",
                    dataType : "json",
                    contentType: "application/json",
                    success:function (data) {
                        $("#uuid").val(data.userid);
                        $("#uname").val(data.username);
                        $("#urole").val(data.roleid.rolename);
                        $("#uemail").val(data.email);
                        $("#uphone").val(data.phone);
                        $("#umoney").val(data.money);
                        $("#update").val(data.pdate);
                        $("#ugender").val(data.gender);
                    }
                })
            }
        </script>
    </div>
</div>

<script src="/static/js/mejs1.js"></script>
</body>
</html>
